<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    

    <h1>事件</h1>
    <strong>给我们一种可以在html里调用激活函数的方式</strong>

    <h2>窗体</h2>
    <pre>
        onload  : 当页面所有元素加载完成以后，你可以调用函数体，或者方法名称 
        onunload ：成对出现的
        onblur  : 失去焦点事件，表示当前窗体不是激活可操作状态 .
        onfocus : 得到焦点事件，表示当前窗体不是激活可操作状态 .
        onresize : 调整大小
        
    </pre>
   
    <h2>表单</h2>
    <pre>
        onchange		当元素改变时运行脚本
        onblur  : 失去焦点事件，表示当前窗体不是激活可操作状态 .
        onfocus : 得到焦点事件，表示当前窗体不是激活可操作状态 .
        onsubmit :当提交表单时运行脚本
    </pre>
    <input type="text" onblur="alert('您确认要离开我吗')">
    <select onchange="alert(this.options[this.selectedIndex].text)">
        <option>年</option>
        <option>月</option>
        <option>日</option>
    </select>
    <!-- onpropertychange  当元素内容发生改变时 -->
    <input type="text" onpropertychange="console.log(111)">


    <h2>鼠标</h2>
    <button onclick="console.log(1)" ondblclick="console.log(2)">点我</button>
    <pre>
        onmousedown : 在元素上面按下鼠标左键
        onmouseover : 当鼠标停在元素的上面的时候
        onmousemove : 当鼠标在元素上面移动时
        onmouseout  : 当鼠标称出元素边界时
        onmouseenter : 当鼠标进入元素边界时
    </pre>
    <div style="width:300px;height:200px;border:1px solid red;background-color: red;" 
    onmouseenter="chagecolor(this);">

    </div>

    <script>
        //js 函数 方法
        function chagecolor(t){
            if(t.style.backgroundColor === 'red'){
                t.style.backgroundColor = "blue";
            } else{
                t.style.backgroundColor = "red";
            }
        }
    </script>

    <h2>键盘</h2>
    <pre>
        onkeydown: 按下就算,就算不需要弹起
        onkeyup  : 弹起
        onkeypress : 按下弹起
    </pre>
    你按一下键盘试一下
    <span id="keys"></span>
    <script>
        document.onkeyup = function (){
            // fromCharCode 把对应键位转换成为字母键位
            document.getElementById("keys").innerText = String.fromCharCode(event.keyCode)
            console.log(String.fromCharCode(event.keyCode));
        }
    </script>

</html>